import 'package:flutter/material.dart';

///技术总结：
///自定义组件，难度在与分配尺寸方面，需要获取到屏幕尺寸，根据有多少个item，来平分尺寸。
  ///  double width = MediaQuery.of(context).size.width / 4 - 5;

class LevelPage extends StatefulWidget {
  const LevelPage({Key key}) : super(key: key);

  @override
  _LevelPageState createState() => _LevelPageState();
}

class _LevelPageState extends State<LevelPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('等级介绍'),
      ),
      body: ListView(
        children: <Widget>[
          leveTiele(context),
          levelItem(context,
              position: '科员', iconData: Icons.ac_unit, level: '0', score: '0'),
          levelItem(context,
              position: '科员', iconData: Icons.ac_unit, level: '0', score: '0'),
          levelItem(context,
              position: '科员', iconData: Icons.ac_unit, level: '0', score: '0'),
          levelItem(context,
              position: '科员', iconData: Icons.ac_unit, level: '0', score: '0'),
          levelItem(context,
              position: '科员', iconData: Icons.ac_unit, level: '0', score: '0'),
          levelItem(context,
              position: '科员', iconData: Icons.ac_unit, level: '0', score: '0'),
        ],
      ),
    );
  }

  Widget leveTiele(BuildContext context) {
    double width = MediaQuery.of(context).size.width / 4 - 5;
    return Padding(
      padding: const EdgeInsets.all(0.0),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            width: width,
            padding: EdgeInsets.all(10),
            child: Center(
              child: Text(
                '等级头衔',
                style: TextStyle(fontSize: 17, fontWeight: FontWeight.w700),
              ),
            ),
          ),
          Container(
            width: width,
            padding: EdgeInsets.all(10),
            child: Center(
                child: Text(
              '等级图标',
              style: TextStyle(fontSize: 17, fontWeight: FontWeight.w700),
            )),
          ),
          Container(
            width: width,
            padding: EdgeInsets.all(10),
            child: Center(
                child: Text(
              '等级',
              style: TextStyle(fontSize: 17, fontWeight: FontWeight.w700),
            )),
          ),
          Container(
            width: width,
            padding: EdgeInsets.all(10),
            child: Center(
                child: Text(
              '所需积分',
              style: TextStyle(fontSize: 17, fontWeight: FontWeight.w700),
            )),
          ),
        ],
      ),
    );
  }

  Widget levelItem(BuildContext context,
      {String position, IconData iconData, String level, String score}) {
    double width = MediaQuery.of(context).size.width / 4 - 5;

    return Container(
      // color: Colors.red,
      child: Padding(
        padding: EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //等级头衔
            Container(
              width: width,
              // color: Colors.pink,
              // padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 10,
                // padding: EdgeInsets.symmetric(horizontal: 5),
                // margin: EdgeInsets.all(5),
                child: Center(
                  child: Text(
                    position,
                    style: TextStyle(color: Colors.red),
                  ),
                ),
                decoration: BoxDecoration(
                  // color: Colors.black87,
                  border: Border.all(width: 1, color: Colors.red),
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
              ),
            ),

            ///等级图标
            Container(
              width: width,
              padding: EdgeInsets.all(5),
              child: Icon(
                iconData,
                size: 20,
                color: Colors.red,
              ),
            ),
            //等级
            Container(
              // color: Colors.red,
              padding: EdgeInsets.all(5),
              width: width,
              child: Center(
                child: Text(
                  level,
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 15,
                  ),
                ),
              ),
            ),

            ///所需积分
            Container(
              padding: EdgeInsets.all(5),
              width: width,
              child: Center(
                child: Text(
                  score,
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 13,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
